<template>
  <el-tabs>
    <!-- 基本信息 + 简介与图片 -->
    <el-tab-pane label="基本信息与简介">
      <el-card>
        <el-row :gutter="20">
          <!-- 左半边：基本信息 -->
          <el-col :span="12">
            <el-descriptions title="站点基本信息" :column="1" border>
              <el-descriptions-item label="站点名称"
              >{{ viewData.stationName || "未填写" }}</el-descriptions-item
              >
              <el-descriptions-item label="站点代码"
              >{{ viewData.stationCode || "未填写" }}</el-descriptions-item
              >
              <el-descriptions-item label="站点类型"
              >{{ viewData.stationType || "未填写" }}</el-descriptions-item
              >
              <el-descriptions-item label="站点属性">
                {{ viewData.stationProperty || "未填写" }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>

          <!-- 右半边：电站图片 -->
          <el-col :span="12">
            <div>
              <h3>电站图片</h3>
              <div class="image-container">
                <img
                    v-if="imageFileList.length > 0"
                    :src="imageFileList[0].url"
                    alt="电站图片"
                />
                <p v-else>暂无图片</p>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 简介 -->
        <div style="margin-top: 20px">
          <h3>电站简介</h3>
          <div
              v-html="renderedMarkdown"
              style="padding: 10px; background-color: #f9f9f9; border-radius: 5px;"
          ></div>
        </div>
      </el-card>
    </el-tab-pane>

    <!-- 详细信息 -->
    <el-tab-pane label="详细信息">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="详细地址"
              >{{ viewData.address || "未填写" }}</el-descriptions-item
              >
              <el-descriptions-item label="充电桩数量"
              >{{ viewData.chargingPileCount || 0 }}</el-descriptions-item
              >
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="12">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="开店时间"
              >{{ viewData.openTime || "未填写" }}</el-descriptions-item
              >
              <el-descriptions-item label="关店时间"
              >{{ viewData.closeTime || "未填写" }}</el-descriptions-item
              >
            </el-descriptions>
          </el-col>
          <el-col :span="12">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="运营状态">
                <span :style="{ color: viewData.status === '正常' ? 'green' : 'red' }">
                  {{ viewData.status || "未知" }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="店面是否开启评价">
                {{ viewData.enableEvaluation ? "是" : "否" }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>

      <!-- 充电桩列表 -->
      <el-card style="margin-top: 20px">
        <el-row>
          <el-col :span="24">
            <el-table :data="viewData.chargingPiles" style="width: 100%" border>
              <el-table-column prop="pileName" label="充电桩名称" />
              <el-table-column prop="pileCode" label="充电桩编号" />
              <el-table-column prop="pileType" label="类型" />
              <el-table-column prop="pilePower" label="功率 (kW)" />
              <el-table-column prop="pileModel" label="型号" />
              <el-table-column prop="pileDesc" label="描述" />
              <el-table-column prop="suitableVehicle" label="适用车型" />
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { computed, ref, watch } from 'vue';
import { marked } from 'marked';

export default {
  name: 'StationDetail',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    viewData: {
      type: Object,
      required: true,
    },
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    const imageFileList = computed(() => {
      return props.viewData.stationImgUrl
          ? [{ name: '电站图片', url: props.viewData.stationImgUrl }]
          : []
    })

    const renderedMarkdown = computed(() => {
      return marked(props.viewData.stationIntro || '');
    });

    // 同步弹窗的 visible
    const visible = ref(props.visible);
    watch(
        () => props.visible,
        (val) => {
          visible.value = val;
          console.log('props.viewData.stationImgUrl:', props.viewData.stationImgUrl);
          if (val) {
            // 当查看弹窗打开时，把图片赋值
            if (props.viewData.stationImgUrl) {
              imageFileList.value = [
                { name: '电站图片', url: props.viewData.stationImgUrl },
              ];
            } else {
              imageFileList.value = [];
            }
            console.log('Updated imageFileList:', imageFileList.value);
          }
        },
        { immediate: true }
    );

    watch(
        () => visible.value,
        (val) => {
          emit('update:visible', val);
        }
    );

    return {
      visible,
      imageFileList,
      renderedMarkdown,
    };
  },
};
</script>

<style scoped>
.image-container {
  width: 200px; /* 调整宽度 */
  height: 150px; /* 调整高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f7f7f7;
  margin: auto; /* 居中显示 */
}
.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 保持比例 */
}
</style>
